<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WorkApp</title>
    <link rel="stylesheet" media="screen" href="/static/lizi/css/login.css">
    <link rel="stylesheet" media="screen" href="/static/layui/css/layui.css">
 
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/layui/layui.js"></script>
    <style type="text/css">
    	.layui-badge{
    		margin-left: 4px;
    	}
    </style>
  </head>
  <body>
    <div id="particles-js" style="display: flex;align-items: center;justify-content: center">
		<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
	</div>
	<div class="layui-fluid">
		<div class="layui-row" style="text-align: center;margin-top: 10px;margin-bottom: 20px;">
			<!-- <h1 class="text-center" style="color: white;font-size: 45px;letter-spacing: 10px">流体数据管理中心</h1> -->
		</div>
		<div class="layui-row">
			<div class="layui-col-lg4" style="height: 10px">
			</div>
			<div class="layui-col-lg4" style="height: 600px">
				<div  style="position: relative; top:50%;left:50%;transform: translate(-50%,-50%);">
					<div id='installdiv'>
					</div>
					<div class="layui-progress layui-progress-big layui-hide" lay-filter="demo" lay-showPercent="true" id="demodiv">
					  <div class="layui-progress-bar" lay-percent="0%"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-lg4" style="height: 10px">
			</div>
		</div>
	</div>
  </body>
<script>
	window.onload=function(){
		layui.use(['element','layer'],function(){
			var layer = layui.layer;
			var element = layui.element;
			layer.msg('系统尚未安装! 6秒后系统将自动安装，期间请不要关闭或刷新浏览器', {
				  icon: 0,
				  time: 6000
				}, function(){
					$('#demodiv').removeClass('layui-hide');
					connectMysql();
				}
			);
			function createLoadingHtml(str,num){
				var htmlstr = '<div class="layui-text layui-anim-up" style="height: 40px;line-height: 40px" id="loding_'+num+'"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px;color: #FFB800; vertical-align: middle ;"></i><span class="layui-badge layui-bg-orange">'+num+'</span><span class="layui-word-aux" style="vertical-align: middle ;font-size: 16px;letter-spacing:2px;font-weight: bold;color: #FFB800 !important">'+str+'</span></div>';
				return htmlstr;
			}
			function createSuccessHtml(str,num){
				var htmlstr = '<i class="layui-icon layui-icon-ok-circle" style="font-size: 29px;color: #5FB878; vertical-align: middle ;"></i><span class="layui-badge layui-bg-green">'+num+'</span><span class="layui-word-aux" style="vertical-align: middle ;font-size: 16px;color: white;letter-spacing:2px;font-weight: bold;color: #5FB878 !important">'+str+'</span>';
				return htmlstr;
			}
			function changeHtml(num,str,elementnum){
				$('#loding_'+num).html(createSuccessHtml(str,num));
	   			element.progress('demo',elementnum);
			}
			function createInstallFile(){
				$('#installdiv').append(createLoadingHtml('正在检测系统是否安装完毕......',5));
				setTimeout(function(){
					$.post('/index/index/createInstallFile', {},
				   		function(data){
				   			if (!data.status) {
				   				changeHtml(5,'系统安装成功!','100%');
				   				setTimeout(function(){
				   					layer.msg('系统安装成功!3秒后将自动进入系统', { icon: 1,time: 3000}, function(){location.reload();});
				   				},500);
				   				
				   			}else{
				   				layer.msg('系统安装失败!', { icon: 2,time: 5000}, function(){return false;});  
				   				return false;
				   			}
			   			}
			   		);
				},4500);
			}
			function createImageTable(){
				$('#installdiv').append(createLoadingHtml('正在创建表---"图片表"......',4));
				setTimeout(function(){
					$.post('/index/index/createImageTable', {},
				   		function(data){
				   			if (!data.status) {
				   				changeHtml(4,'"图片表"创建成功!','80%');
				   				createInstallFile();
				   			}else{
				   				layer.msg('"图片表"创建失败!', { icon: 2,time: 5000}, function(){return false;});  
				   				return false;
				   			}
			   			}
			   		);
				},4000);
			}
			function createDataTable(){
				$('#installdiv').append(createLoadingHtml('正在创建表---"数据表"......',3));
				setTimeout(function(){
					$.post('/index/index/createDataTable', {},
				   		function(data){
				   			if (!data.status) {
				   				changeHtml(3,'"数据表"创建成功!','60%');
				   				createImageTable();
				   			}else{
				   				layer.msg('"数据表"创建失败!', { icon: 2,time: 5000}, function(){return false;});  
				   				return false;
				   			}
			   			}
			   		);
				},4000);
			}
			function createDb(){
				$('#installdiv').append(createLoadingHtml('正在创建---"系统数据库"......',2));
				setTimeout(function(){
					$.post('/index/index/createDb', {},
				   		function(data){
				   			if (!data.status) {
				   				changeHtml(2,'"系统数据库"创建成功!','40%');
				   				createDataTable();
				   			}else{
				   				layer.msg('"系统数据库"创建失败!', { icon: 2,time: 5000}, function(){return false;});  
				   				return false;
				   			}
			   			}
			   		);
				},4000);
			}
			function connectMysql(){
				$('#installdiv').append(createLoadingHtml('正在尝试连接数据库......',1));
				setTimeout(function(){
					$.post('/index/index/connectMysql', {},
				   		function(data){
				   			if (!data.status) {
				   				changeHtml(1,'连接数据库成功!','20%');
				   				createDb();
				   			}else{
				   				layer.msg('数据库创建失败!', { icon: 2,time: 5000}, function(){return false;});  
				   				return false;
				   			}
			   			}
			   		);
				},3000);
			}
		});
	};
	
</script>
</html>
